Configure Google Loyalty Pass Properties
Overview
The Google tab of the Wallet Pass Details screen allows you to configure the Wallet Pass properties for Members using Google devices. As you make changes to the configuration, the platform displays a preview render of the pass as it will appear on Google devices.
The Google tab is organized into the following sections, each of which is described below in more detail:
-
Barcode: Configure the pass's barcode settings
-
Color & Images: Customize the visual elements of the pass
-
Front Content: Design the primary view that displays essential information to Members
-
Details: Provide comprehensive information such as detailed terms and conditions, in addition to the Front Content.
-
Links: Provide useful links
-
Settings: Optionally enable pass sharing
-
Test Preview: Preview the pass functionality for Google devices using a specified test Member
Barcode
The Barcode section is used to configure the barcode that appears on the Mobile Wallet Pass.
-
Select the Barcode tab.
-
Set the barcode value using one of the following methods:
-
For a fixed number (like a coupon code), type the number directly in the Barcode Value field.
-
For personalized values, enter "@" to bring up a menu of available Content Tokens; select the desired Content Token.
-
-
From the Format drop-down menu, select a barcode format:
-
QR Code: Best for storing more information
-
PDF 417: Common for boarding passes
-
Aztec: Efficient space usage
-
Code 128: Ideal for numeric data
-
-
Optionally, in the Alt Text field, enter alt text for accessibility.
-
Click Save Changes.
The preview rendering on the right updates automatically as you make configuration changes.
Color & Images
The Color & Images section is used to customize the visual elements of the pass.
The layout of a Loyalty Pass on a Google device is as follows:
-
Under the Google tab, select the Color & Images tab.
-
The platform allows you to customize the Background color. Choose a color using one of the following methods:
-
Enter the desired hex code value.
-
Click the color swatch, and select the desired color from the color picker.
-
-
The platform allows you to customize the images used for the Program Logo, Hero Image, and Main Image. For each option in the Images sub-section, click Choose File. Browse to and select the desired image file. The platform displays a thumbnail image. Click Upload. For each image, please note the following recommendations:
-
Program Logo: Recommended size of 660x660 pixels.This image should be your brand identifier or logo. The use of a Program Logo is optional.
-
Hero Image: Recommended size of 1032x336 pixels. This wide-format image appears at the bottom of the Loyalty Card. The use of a Hero Image is optional.
-
Main Image: Recommended size of 1860 pixels wide, with variable height. The use of a Main Image is optional.
-
-
Click Save Changes.
The preview rendering on the right updates automatically as you make configuration changes.
Note: The preview may not always render images to size. Always use the Test Preview feature to see the final rendering.
Front Content
The front section of your Google Loyalty Pass serves as the primary interface for Members, displaying essential information at a glance. This section must be carefully configured to ensure optimal visibility and user experience.
The Front Content comprises three fields, all of which are optional:
-
Program Name: This text appears near the top of the Pass, and should contain your program’s official name.
-
Loyalty Points: This field can be used for elements like displaying the Member’s current Metric Balance.
-
Secondary Loyalty Points: This field can be used for other elements, like the Member’s Tier Status, for example.
The two Loyalty Points fields include a Label and a Value. Typically the Label is smaller, and contains static text. The Value is larger, and will often contain a dynamic value populated by means of a Content Token. The following example shows the basic positions and appearances of the Labels and Values for each field.
To configure the Front Content:
-
Under the Google tab, select the Front Content tab.
-
In the Program Name field, enter the name of your loyalty program.
-
For the Loyalty Points field, enter the following details.
Label: Enter either a static value or type “@” to pull up a list of Content Tokens, and select a Content Token. This value appears in a smaller font size than the Value.
Value: Enter either a static value or type “@” to pull up a list of Content Tokens, and select a Content Token. This value represents the main text for this field, and is displayed in a larger font size than the Label.
-
For the Secondary Loyalty Points field, enter the Label and Value as described above.
-
Click Save Changes.
The preview rendering on the right updates automatically as you make configuration changes.
In the example below, the Member’s point balance is displayed in the Loyalty Points Value by means of a Content Token called “stl_token_point.” The Loyalty Points Label contains a static value of “Point Balance.” In a similar manner, the Member’s current tier is displayed in the Secondary Loyalty Points field.
Below is the final render of this Wallet Pass.
Details
The front of your Google Pass serves as a quick-reference display with limited space, requiring concise, high-impact content. In addition to the Front Content, the Details section offers expanded capabilities, allowing you to include comprehensive information such as detailed terms and conditions, contact information, and web resources for your Members.
The Details section comprises the following two standard fields, as well as the ability to create additional custom sections:
-
Account Name: This field should contain the Member’s name.
-
Account ID: This field should contain the Member’s account ID.
The above two fields include a Label and a Value. Typically the Label is smaller, and contains static text. The Value is larger, and will often contain a dynamic value populated by means of a Content Token.
To configure the Details section:
-
Under the Google tab, select the Details tab.
-
Optionally, in the Description field, enter a Store Card description, such as a summary of the Card’s purpose or benefits.
-
For the Account Name field, enter the following details.
Label: Enter either a static value or type “@” to pull up a list of Content Tokens, and select a Content Token. This value appears in a smaller font size than the Value.
Value: Enter either a static value or type “@” to pull up a list of Content Tokens, and select a Content Token. This value represents the main text for this field, and is displayed in a larger font size than the Label.
-
For the Account ID field, enter the Label and Value as described above.
-
To add a new section, click Add New Section.
-
From the Type drop-down menu, select the content type:
-
Fixed Text: Used for static content like terms and conditions or privacy policies. Supports HTML formatting for clickable links and text styling.
-
Stores / Locations: Implements location-aware functionality to show relevant store information based on the user's location.
-
Custom: Enables advanced customization through Content Sources (Note: Content Sources must be pre-configured in the Advanced Options section).
-
-
In the Header field, enter a descriptive header for this section.
-
In the Template field, either enter simple text content, or define advanced dynamic content using Liquid syntax.
Note: For additional help on creating Liquid templates, a Templating Guide link is displayed within the Details tab. This guide provides code samples to support several different use cases, such as listing valid Offers, or displaying the balance of a gift card. If using Liquid templating, please be sure your Content Sources and/or Content Tokens are set up, and all Content Sources have been added in the Advanced tab of the Wallet Pass.
Repeat the above steps as needed to add more sections to the Card’s Details section.
-
-
Click Save Changes.
Links
To add links to the Google Wallet Pass:
-
Under the Google tab, select the Links tab.
-
Click Add New Link.
-
In the URI field, enter the link’s URI (Uniform Resource Identifier); ensure that this is a valid, working destination.
-
In the Description field, enter a clear descriptive label that tells Members what to expect when they tap the link.
-
Repeat the above steps as needed to add more links.
-
Click Save Changes.
Settings
The Settings tab provides essential controls for managing how Members can share and access passes across different devices. These security settings are crucial for maintaining the integrity of your pass distribution system and ensuring appropriate access control.
For Android devices, you can configure pass sharing through three distinct permission levels:
-
MULTIPLE HOLDERS (Unrestricted Sharing)
-
Allows multiple users to access the pass on different devices
-
Ideal for promotional passes or general-access memberships
-
Provides maximum flexibility for pass distribution
-
-
ONE USER ALL DEVICES (Single User, Multiple Devices)
-
Restricts pass access to a single user account
-
Allows that user to access the pass across all their devices
-
Recommended for personal membership passes or loyalty programs
-
-
ONE USER ONE DEVICE (Restricted Access) - Not Available
-
Intended for use by select Google partners in limited circumstances; please select one of the above levels instead.
-
To configure the permission settings for your Google Wallet Pass:
-
Under the Google tab, select the Setting tab.
-
From the Device and Users Allowed Status drop-down menu, select the desired permission level, as described above.
-
Click Save Changes.
Test Preview
To properly test your Google Wallet Pass, you need access to a Google device. This method provides the most authentic testing experience.
Prior to the test, you must ensure:
-
A Member is designated as a “Test Member” on the Member Profile screen
To test this Google Wallet Pass:
-
Under the Google tab, select the Test Preview tab.
-
From the Member drop-down menu, choose your desired Test Member (designating a Member as a “Test Member” is available on the Member Profile screen). The platform generates a button to add the Card to Google Wallet.
-
Click Add to Google Wallet. A confirmation dialog box is displayed; click Add.
-
An alert is displayed, indicating “This is a mock success. Wallet Pass has been saved to Google Pay.”
-
Click View to view the Google Wallet Pass contents in a new browser tab.
The Wallet Pass will open in your browser.